<template>
	<view class="content">
		<!-- 背景图片 -->
		<image class="back" src="../image/bg2.jpg" mode="widthFix"></image>
		<div class="main">
			<!-- 标题 -->
			<div class="title">
				<p>揭阳市大健康产业协会</p>
				<p>携手共赢 共创辉煌</p>
			</div>
			<!-- 邀请函图片 -->
			<div class="picture">
				<image src="../image/3f8368b1-8ac4-4ca9-b95d-752e70278689.png" mode="" mode="widthFix"></image>
			</div>
			<!-- 邀请入会 -->
			<div class="invitation">
				诚邀入会
			</div>
			<!-- 视频展示 -->
			<div class="videoshow">
				<video src="https://csgy-bucket.oss-cn-guangzhou.aliyuncs.com/2022-07-22/%E5%A4%A7%E5%81%A5%E5%BA%B7%E5%AE%A3%E4%BC%A0.mp4" mode="" autoplay="true" loop="true"></video>
			</div>
			<!-- 邀请内容 -->
			<div class="invitationMain">
				<p class="one">尊敬的各大健康产品单位:</p>
				<div class="two">
					为响应国务院“健康中国行动”发展
					战略，全方位、多层次、宽领域开展健康
					产业合作交流，有效整合产业资源，
					优化
					产业布局，促进健康产业快速发展。
					已由
					9家代表单位共同发起，并获揭阳市民政局
					批准筹备成立揭阳市大健康产业协会。协
					会将依托强大的行业及社会资源，
					致力于
					健康产业资源整合，联动政府机关、企事
					业单位，建立涵盖医疗、教育、康养、护
					理、食品、药械等行业的健康产业链平台。
				</div>
				<p class="three">现诚邀您的加入！</p>
			</div>
			<!-- 协会发起单位一览 -->
			<div class="membership">
			【 协会发起单位一览 】
			</div>
			<div class="membershipMain" style="margin-top: 60rpx;">
				<p>广东国裕大健康实业集团股份有限公司</p>
				<p>潮汕国裕医院</p>
				<p>多多宝国际母婴护理服务有限公司</p>
				<p>广东良康医药连锁有限公司</p>
				<p>揭阳市金禾田生物科技有限公司</p>
				<p>普宁市达康医药有限公司</p>
				<p>广东利泰制药股份有限公司</p>
				<p>广东诗安馨月母婴家政服务有限公司</p>
				<p>揭阳市澳林体育文化发展有限公司</p>
			</div>
			<div class="sex">
				<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_03.png" mode="" class="main-item"></image>
				<image src="../image/dakang.jpg" mode=""></image>
				<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_12.png" mode=""></image>
				<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_14.png" mode=""></image>
				
				<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_05.png" mode=""></image>
				<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_07.png" mode=""></image>
				
				<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_15.png" mode=""></image>
				<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_17.png" mode=""></image>
				<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_18.png" mode=""></image>
				
				<!-- <div class="sexTop">
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_03.png" mode=""></image>
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_05.png" mode=""></image>
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_07.png" mode=""></image>
				</div>
				<div class="sexBottom">
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_12.png" mode=""></image>
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_14.png" mode=""></image>
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_15.png" mode=""></image>
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_17.png" mode=""></image>
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_18.png" mode=""></image>
					<image src="../image/96f6ef51e84cc0d99d221b0f4747eae_20.png" mode=""></image>
				</div> -->
			</div>
			<div class="division">
				<image src="../image/0144c006-fc0b-4c78-b7de-581dfb2e883d.png" mode="widthFix"></image>
			</div>
			<!-- 入会条件与方式 -->
			<div class="membership">
			【 入会条件与方式 】
			</div>
			<div class="membershipMain">
				<div class="membershipTitle">
					<image src="../image/ecf0c1b2-ba79-4fc1-9db4-77e92d308056.png" mode="widthFix"></image>
				</div>
				<p>
					1、拥护本会、积极投身大健康事业;
				</p>
				<p>
					2、在本行业领域内具有一定的影响;
				</p>
				<p>
					3、会员应持有工商营业执照等单位证件
				</p>
				<div class="membershipTitle">
					<image src="../image/ad19f2ca-e840-4b2a-b79c-bbdf30622487.png" mode="widthFix"></image>
				</div>
				<p>
					1、于此邀请函登记入会意愿;
				</p>
				<p>
					2、登记后筹备组会联系您递交入会申请资料。
				</p>
			</div>
			<div class="division">
				<image src="../image/0144c006-fc0b-4c78-b7de-581dfb2e883d.png" mode="widthFix"></image>
			</div>
			<!-- 入会权益 -->
			<div class="membership colorStyle">
			【 入会权益 】
			</div>
			<div class="membershipMain colorStyle" style="margin-top: 100rpx;">
				<p>
					1、共享政企平台资源、抱团共进退。
				</p>
				<p>
					2、享受大健康产业发展红利。
				</p>
				<p>
					3、建立良好的人脉关系和交易交流平台。
				</p>
				<p>
					4、组织文化和商务考察，促进产业链整合。
				</p>
				<p>
					5、提供展示形象和扩大影响的机会。
				</p>
				<p>
					6、迅速巩固和提升会员在行业内的主导地位。
				</p>
				<p>
					7、获得行业协会权威推荐和表彰。
				</p>
			</div>
			<div class="division">
				<image src="../image/0144c006-fc0b-4c78-b7de-581dfb2e883d.png" mode="widthFix"></image>
			</div>
			<!-- 入会信息登记 -->
			<div class="membership colorStyle">
			【 入会信息登记 】
			</div>
			<div class="register">
				<div class="registerBox" style="margin: 0 auto;margin-top: 40rpx;">
					<p>
						会员单位名称：
					</p>
					<div>
						<input type="text" v-model="formData.name">
					</div>
				</div>
				<p class="tips">(本会为行业协会，需以单位形式入会)</p>
				<div class="registerBox">
					<p>
						单位主要负责人：
					</p>
					<div>
						<input type="text" v-model="formData.principal">
					</div>
				</div>
				<div class="registerBox">
					<p>
						联系人：
					</p>
					<div>
						<input type="text" v-model="formData.contentName">
					</div>
				</div>
				<div class="registerBox">
					<p>
						联系人电话：
					</p>
					<div>
						<input type="text" v-model="formData.contentMobile">
					</div>
				</div>
				<div class="registerBox">
					<p>
						拟任会员类别：
						
					</p>
					<div>
						
						<select v-model="formData.type">
							<option v-for="opt in optionList" :value="opt">{{opt}}</option>
						
						</select>
						
						<input type="text">
					</div>
				</div>
				<p class="tips">(会员类别职责见下方)</p>
				<div v-if="selOptVo">
					<div class="division">
						<image src="../image/0144c006-fc0b-4c78-b7de-581dfb2e883d.png" mode="widthFix"></image>
					</div>
					<div class="membership colorStyle" style="font-size: 38rpx;">
					【 {{selOptVo.name}}主要职责 】
					</div>
					
					<div class="membershipMain colorStyle" style="margin-top: 30rpx;">
						<p v-for="(item,index) in selDutyList" :key="item">
							{{index+1}}、{{item}}
						</p>
					</div>
					<div class="membershipMain colorStyle" style="margin-top: 30rpx; font-size: 28rpx;" v-if="selOptVo.name!=='会长单位'">
						会费参考标准:{{selPrice}}
					</div>
				</div>
				
				
				<div class="submit" @click="submitfun">
					提 交
				</div>
				<div class="phone"></div>
				
				
				<div class="phonewrapper">
					<p>筹备组秘书处联系方式:</p>
					<div class="phoneMain">
						<p class="left">联系人：林女士</p>
						<p class="right">
							<image src="../image/ac143b86-1da2-46aa-896a-1a8bcd48b1b7.png" mode="widthFix"></image>
							<span>13711459417</span>
						</p>
					</div>
				</div>
			</div>
			
			<!-- 入会权益 -->
			
		
		
		</div>
	</view>
</template>

<script>
	import job from './job'
	export default {
		data() {
			return {
				title: 'Hello',
				formData: {
					name: '',
					principal: '',
					contentMobile: '',
					type: '',
					contentName:''
				},
				optionList:job.jobList.map(item=>item.name)
			}
		},
		onLoad() {

		},
		computed:{
			selOptVo(){
				return job.jobList.find(item=>item.name==this.formData.type);
			},
			selDutyList(){
				return this.selOptVo && this.selOptVo.dutyList;
			},
			selPrice(){
				return this.selOptVo && this.selOptVo.price;
			}
		},
		methods: {
			// 提交
			submitfun() {
				let that = this;
				uni.request({
					method:'post',
				    url: 'http://api.ddbyz.com/shop-api/xhInvite/saveOne', //仅为示例，并非真实接口地址。
				    data: that.formData,
				    success: (res) => {
						if (res.data.code == 1) {
							alert('提交成功!')
							uni.showToast({
								title: '提交成功！',
								icon: 'none',
								duration: 2000
							});
						} else {
							alert(res.data.msg)
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
				    },
					fail:(err) => {
						alert('操作失败!')
						uni.showToast({
							title: '操作失败!',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100vw;
		height: 100vh;
		position: relative;
	}
	.content .back{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		z-index: 100;
	}
	.main{
		z-index: 1000;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.content .title{
		width: 100%;
		font-size: 56rpx;
		margin-top: 100rpx;
		p{
			text-align: center;
			color: rgb(253, 245, 184);
			letter-spacing:10rpx;
			margin-bottom: 40rpx;
			font-weight: bold;
		}
	}
	.invitation{
		width: 100%;
		text-align: center;
		color: rgb(250, 232, 165);
		font-size: 44rpx;
		margin-top: 30rpx;
		font-weight: bold;
		letter-spacing:6rpx;
	}
	.invitationMain{
		width: 95%;
		margin: 0 auto;
		border: 6rpx solid rgb(249, 226, 150);
		padding: 0 50rpx;
		box-sizing: border-box;
		margin-top: 100rpx;
		background: rgb(189, 0, 0);
		box-shadow: 0 3px 15px 0 #666 inset;
		border-radius: 0.5em;
		.one{
			margin-top: 50rpx;
			font-size: 32rpx;
			color: rgb(254, 240, 164);
			font-weight: bold;
			letter-spacing:4rpx;
		}
		.two{
			margin-top: 50rpx;
			color: rgb(254, 241, 166);
			text-indent: 2em;
			line-height: 60rpx;
		}
		.three{
			margin-top: 50rpx;
			font-size: 40rpx;
			color: rgb(251, 224, 147);
			margin-bottom: 60rpx;
			letter-spacing:4rpx;
		}
		.four{
			font-size: 28rpx;
			color: rgb(253, 232, 168);
			margin-top: 60rpx;
		}
		.five{
			font-size: 28rpx;
			color: rgb(238, 191, 158);
			p{
				margin-top: 20rpx;
			}
		}
	}
	.membership{
		width: 100%;
		font-size: 44rpx;
		color: rgb(253, 234, 159);
		text-align: center;
		margin-top: 50rpx;
		letter-spacing:5rpx;
		font-weight: bold;
	}
	.membershipMain{
		width: 85%;
		margin: 0 auto;
		.membershipTitle{
			margin-top: 40rpx;
			position: relative;
			left: -10rpx;
			top: 0;
			image{
				width: 280rpx;
			}
		}
		p{
			color: rgb(255, 255, 206);
			font-size: 28rpx;
			margin-bottom: 30rpx;
		}
	}
	.consulting{
		p{
			text-align: center;
			color: rgb(240, 208, 170);
		}
		.consultingone{
			margin-top: 100rpx;
			font-size: 26rpx;
		}
		.consultingtwo{
			margin-top: 20rpx;
			font-size: 26rpx;
		}
		.consultingthree{
			margin-top: 50rpx;
			font-size: 36rpx;
			color: rgb(253, 245, 206);
		}
		.consultingfour{
			color: rgb(253, 245, 206);
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			margin-top: 10rpx;
			image{
				display: block;
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.register{
		width: 85%;
		margin: 0 auto;
		border: 6rpx solid rgb(249, 226, 150);
		border-radius: 0.5em;
		margin-top: 100rpx;
		background: rgb(189, 0, 0);
		padding: 20rpx 0;
		box-sizing: border-box;
		box-shadow: 0 3px 15px 0 #666 inset;
		.tips{
			width: 90%;
			margin: 0 auto;
			color: rgb(241, 211, 168);
			font-size: 26rpx;
			margin-bottom: 20rpx;
			margin-top: 10rpx;
		}
		.registerBox{
			width: 90%;
			height: 40rpx;
			margin: 0 auto;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			p{
				color: rgb(250, 236, 202);
				font-size: 30rpx;
			}
			div{
				width: 300rpx;
				height: 50rpx;
				background: rgb(253, 245, 207);
				border-radius: 0.2em;
				overflow: hidden;
				padding: 0 15rpx;
				box-sizing: border-box;
				input{
					border: none;
					outline: none;
					color: rgb(189, 0, 0);
					background: rgb(253, 245, 207);
				}
				select{
					width: 200rpx;
					margin: 0 auto;
					border: none;
					outline: none;
					color: rgb(189, 0, 0);
					background: rgb(253, 245, 207);
					margin-left: 50rpx;
				}
			}
		}
	}
	.submit{
		width: 180rpx;
		height: 60rpx;
		margin: 0 auto;
		border-radius: 0.5em;
		box-shadow: 0 2px 5px 1px rgba(0,0,0,.2);
		border-top: 2rpx solid #ececec;
		margin-top: 40rpx;
		background: rgb(204, 0, 0);
		color: rgb(252, 236, 152);
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	.colorStyle{
		color: rgb(254, 241, 196) !important;
		p{
			color: rgb(254, 241, 196) !important;
		}
	}
	.picture{
		height: 220rpx;
		margin: 100rpx 0;
		image{
			display: block;
			width: 50%;
			margin: 0 auto;
		}
	}
	.division{
		width: 100%;
		margin: 40rpx 0;
		image{
			width: 80%;
			display: block;
			margin: 0 auto;
		}
	}
	.sex{
		width: 85%;
		margin: 50rpx auto;
		border-radius: 0.5em;
		background: rgb(172, 0, 0);
		padding: 15rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 10rpx;
		image{
			width: 100%;
			height: 110rpx;
			
		}
		.main-item{
			grid-column: 1 / 3;
		}
		// .sexTop{
		// 	width: 100%;
		// 	display: flex;
		// 	flex-flow: row nowrap;
		// 	justify-content: space-between;
		// 	image{
		// 		width: 32%;
		// 		height: 60rpx;
		// 		display: block;
		// 	}
		// }
		// .sexBottom{
		// 	width: 100%;
		// 	display: flex;
		// 	flex-flow: row nowrap;
		// 	justify-content: space-between;
		// 	margin-top: 10rpx;
		// 	image{
		// 		width: 15.5%;
		// 		height: 80rpx;
		// 		display: block;
		// 	}
		// }
	}
	.phone{
		width: 85%;
		margin: 30rpx auto;
		height: 4rpx;
		background: rgb(254, 240, 195);
	}
	.phonewrapper{
		width: 85%;
		margin: 30rpx auto;
		font-size: 28rpx;
		color: rgb(254, 240, 195);
		.phoneMain{
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			margin-top: 10rpx;
			.right{
				margin-left: 20rpx;
				display: flex;
				flex-flow: row nowrap;
				image{
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.videoshow{
		width: 95%;
		margin: 0 auto;
		margin-top: 100rpx;
		video{
			width: 100%;
			height: 350rpx;
		}
	}
</style>
